<script setup>
   //导入axios  npm install axios 先执行命令安装，
   import axios from 'axios'  //本地导入
   //定义响应式数据  ref-----可以传入数组
   const articleList = ref([]);

   //发送异步请求，获取所有文章数据
   axios.get('http://localhost:8080/article/getAll').then(
    result=>{
         //把服务器相应的数据保存起来，将ref函数的value来接收
         articleList.value = result.data;
    }
   ).catch(err =>{
     console.log(err);
   });

    //定义响应式数据 searchConditions
    const searchConditions = ref({
        category:'',
        state:''
    })

   //声明search函数
   const search = function(){
    //发送请求，完成搜索       get请求参数，通过... searchconditions.value结构
    axios.get("http://localhost:8080/article/search",{params:{...searchConditions.value}}
    ).then(result =>
    {
         articleList.value = result.data;
    }).catch( err =>{
        console.log(err);
    })

   }

</script>

<template>
<!-- html元素 -->
<div>
    文章分类：<input type="text" v-model="searchConditions.category">
    发布状态：<input type="text" v-model="searchConditions.state">

    <button v-on:click = "search">搜索</button>

    <br/>

    <table border="1 solid" colspa='0' cellspacing="0" >
        <tr>
            <th>标题</th>
            <th>分类</th>
            <th>发表时间</th>
            <th>状态</th>
            <th>操作</th>
        </tr>

        <tr v-for="(article,index) in articleList">
            <td>{{article.title}}</td>
            <td>{{article.category}}</td>
            <td>{{article.time}}</td>
            <td>{{article.state}}</td>
            <td>
                <button>编辑</button>
                <button>删除</button>
            </td>
        </tr>

        <!-- <tr>
            <td>标题2</td>
            <td>分类2</td>
            <td>2002-02-01</td>
            <td>已发布</td>
            <td>
                <button>编辑</button>
                <button>删除</button>
            </td>
        </tr> -->
    </table>
    </div>
</template>